import React,{Component} from 'react';
import { Tabs, WhiteSpace,ListView } from 'antd-mobile';
import { StickyContainer, Sticky } from 'react-sticky';
import axios from 'axios'
import {NavLink} from 'react-router-dom'
function renderTabBar(props) {
  return (<Sticky>
    {({ style }) => <div style={{ ...style, zIndex: 1 }}><Tabs.DefaultTabBar {...props} /></div>}
  </Sticky>);
}
const tabs = [
  { title: '全部类别' },
  { title: '简餐便当' },
  { title: '传统美食' },
  { title: '全部类别' },
  { title: '简餐便当' },
  { title: '全部类别' },
  { title: '简餐便当' }
];

export default class Tabs2 extends Component{
    constructor(props) {
        super(props);
        const dataSource = new ListView.DataSource({
          rowHasChanged: (row1, row2) => row1 !== row2
        });
        this.state = {
          dataSource,
          list: [],
          page: 1
        };
      }

      makeRemoteRequest = ()=>{
        axios({
          url   : `http://localhost:3000/product?_page=${this.state.page}&_limit=5&_sort=id&_order=desc`,
          method: 'get'
        }).then(res=>{
          this.setState({
            list: [...this.state.list, ...res.data],
            page: this.state.page + 1
          })
        })
      }

      componentDidMount (){
        this.makeRemoteRequest();
      }

      onEndReached = (event)=>{
        this.makeRemoteRequest();
      }

      // 渲染每一行
      renderRow = (rowData,sectionID,rowID)=>{
        var productDetailUrl = `/product/${rowData.id}`
        return (
          <NavLink to={productDetailUrl}>
            <div key={rowID} style={{ padding: '0 15px' }}>
                <div style={{ display: '-webkit-box', display: 'flex', padding: '15px 0' }}>
                  <img style={{ height: '64px', marginRight: '15px' }} src={rowData.img} alt="" />
                  <div style={{ lineHeight: 1 }}>
                    <div style={{ marginBottom: '8px', fontWeight: 'bold' }}>{rowData.text}</div>
                    <div><span style={{ fontSize: '30px', color: '#FF6E27' }}>¥{rowData.price.number}</span></div>
                  </div>
                  <div>
                  </div>
                </div>
            </div>
          </NavLink>
        )
      }
  render(){
    return (
      <div>
        <div>
            <WhiteSpace />
            <StickyContainer>
                <Tabs tabs={tabs}
                initalPage={'t2'}
                renderTabBar={renderTabBar}
                >
                <div style={{ height: '530px', backgroundColor: '#fff' }}>
                <ListView
                dataSource = {this.state.dataSource.cloneWithRows(this.state.list)}
                renderRow  = {(rowData, sectionID, rowID, highlightRow) => this.renderRow(rowData,sectionID,rowID)}
                style      = {{
                  height  : document.documentElement.clientHeight - 50,
                  overflow: 'auto',
                }}
                onEndReached          = {this.onEndReached}
                onEndReachedThreshold = {10}
              />
                </div>
                <div style={{ height: '530px', backgroundColor: '#fff' }}>
                <ListView
                dataSource = {this.state.dataSource.cloneWithRows(this.state.list)}
                renderRow  = {(rowData, sectionID, rowID, highlightRow) => this.renderRow(rowData,sectionID,rowID)}
                style      = {{
                  height  : document.documentElement.clientHeight - 50,
                  overflow: 'auto',
                }}
                onEndReached          = {this.onEndReached}
                onEndReachedThreshold = {10}
              />
                </div>
                <div style={{ height: '530px', backgroundColor: '#fff' }}>
                <ListView
                dataSource = {this.state.dataSource.cloneWithRows(this.state.list)}
                renderRow  = {(rowData, sectionID, rowID, highlightRow) => this.renderRow(rowData,sectionID,rowID)}
                style      = {{
                  height  : document.documentElement.clientHeight - 50,
                  overflow: 'auto',
                }}
                onEndReached          = {this.onEndReached}
                onEndReachedThreshold = {10}
              />
                </div>
                <div style={{ height: '530px', backgroundColor: '#fff' }}>
                <ListView
                dataSource = {this.state.dataSource.cloneWithRows(this.state.list)}
                renderRow  = {(rowData, sectionID, rowID, highlightRow) => this.renderRow(rowData,sectionID,rowID)}
                style      = {{
                  height  : document.documentElement.clientHeight - 50,
                  overflow: 'auto',
                }}
                onEndReached          = {this.onEndReached}
                onEndReachedThreshold = {10}
              />
                </div>
                <div style={{ height: '530px', backgroundColor: '#fff' }}>
                <ListView
                dataSource = {this.state.dataSource.cloneWithRows(this.state.list)}
                renderRow  = {(rowData, sectionID, rowID, highlightRow) => this.renderRow(rowData,sectionID,rowID)}
                style      = {{
                  height  : document.documentElement.clientHeight - 50,
                  overflow: 'auto',
                }}
                onEndReached          = {this.onEndReached}
                onEndReachedThreshold = {10}
              />
                </div>
                <div style={{ height: '530px', backgroundColor: '#fff' }}>
                <ListView
                dataSource = {this.state.dataSource.cloneWithRows(this.state.list)}
                renderRow  = {(rowData, sectionID, rowID, highlightRow) => this.renderRow(rowData,sectionID,rowID)}
                style      = {{
                  height  : document.documentElement.clientHeight - 50,
                  overflow: 'auto',
                }}
                onEndReached          = {this.onEndReached}
                onEndReachedThreshold = {10}
              />
                </div>
                <div style={{ height: '530px', backgroundColor: '#fff' }}>
                <ListView
                dataSource = {this.state.dataSource.cloneWithRows(this.state.list)}
                renderRow  = {(rowData, sectionID, rowID, highlightRow) => this.renderRow(rowData,sectionID,rowID)}
                style      = {{
                  height  : document.documentElement.clientHeight - 50,
                  overflow: 'auto',
                }}
                onEndReached          = {this.onEndReached}
                onEndReachedThreshold = {10}
              />
                </div>
                </Tabs>
            </StickyContainer>
            <WhiteSpace />
        </div>
      </div>
    )
  }
}